<template>
  <div class="content_wrapper main_bg">
    <headback
      :title="orderTitle" class="border_bottom">
          <template #right>
        <i v-if="orderItem.status==0" @click="toShare" class="iconfont icon-linear-new-symbol-share"></i>
      </template>
      </headback>
    <div class="wrap">
      <div class="order_head_title">
      <div  v-if="orderItem.orderType==1" class="lender_box" style="margin: 0 0;" @click.stop="goToPage('userOrder', orderItem)">
        <div class="lend_title">卖出方</div>

        <div class="interest_amount"> 
            <Blockies class="border_radius" :seed="orderItem.owner" :size="18" :scale="2" spotcolor="#000" />
        <div class="shop_box">
          <div  class="shop_name">{{ orderItem.nickname }}</div>
          <div>{{ splitAddress(orderItem.owner,9) }}</div>
        </div>
      </div>

      </div>

      <div  class="lender_box" v-if="orderItem.orderType==2" style="margin: 0 0;" @click.stop="goToPage('userOrder', orderItem)">
        <div class="lend_title">买入方</div>
        <div class="interest_amount">
            <Blockies class="border_radius" :seed="orderItem.owner" :size="18" :scale="2" spotcolor="#000" />

        <div  class="shop_box">
          <div  class="shop_name">{{ orderItem.nickname }}</div>
          <div>{{ splitAddress(orderItem.owner,9) }}</div>
        </div>
      </div>
      </div>
    </div>

      <orderDescribe2 :status="orderItem.status" :item="orderItem">
      <div class="price_box">1 {{ store.state.BTC }} ≈ {{ store.state.tokenPrice }} {{ store.state.USDT }}</div>

      </orderDescribe2>
      <div class="order_box"  v-if="orderItem.status==0">
    
        <div class="order_content">
          <div class="price_box" >
            <div class="data_box">
        <div class="data_name">{{ t("price") }}:</div>
          <div class="amount_value">{{truePrice }}</div> <div class="amount_name">/{{ store.state.USDT}}</div>
      </div>
      <div>
       <div class="data_way"> {{ orderItem.priceType==1?'固定价格':'实时价格' }}</div>
       <div v-if="orderItem.priceType==2&&orderItem.upRate!=0" class="data_way tip">{{  orderItem.rateType==1 ?' 上浮': '下浮' }} {{ (orderItem.upRate*100) }} %</div>
      </div>
     </div>
      <div class="form_item">
          <div class="form_content" v-if="orderItem.orderType==2">
            <van-field type="number" v-model="usdtValue" :placeholder="t('')">
              <template #button> </template>
            </van-field>

                <span class="color_light">
                  <img :src="requireImg(store.state.usdtImg)"  style="margin-right: 4px;" />
                  {{ store.state.USDT }}
                </span>
                <span class="color_light" @click="setMaxUsdt">最大</span>
          </div>

          <div class="form_content" v-else>
            <van-field type="number" v-model="vdsValue" :placeholder="t('')">
              <template #button> </template>
            </van-field>

                <span class="color_light">
                  <img :src="requireImg(store.state.btcImg)" style="margin-right: 4px;" />
                  {{ store.state.BTC }}
                </span>
                <span class="color_light" @click="setMaxVds">最大</span>
          </div>

    
        </div>
        <div v-if="overAmount" class="tip"> 请确保输入的数量小于等于{{  orderItem.amount }} </div>
        <div class="data_box order_remark">
          <div class="lend_title">
            {{ t("saveAmount") }}
          </div>
          <div class="interest_amount">
            <div  class="interest_amount" v-if="orderItem.orderType=='2'">
            <span class="amount_value2"> {{ orderItem.amount }}</span> {{ store.state.USDT}} 

           （ 总 {{ orderItem.allAmount }}  {{ store.state.USDT}} )
           </div>
          <div class="interest_amount" v-else>
           <span class="amount_value2">{{ orderItem.amount  }} </span>  
            {{ store.state.BTC}}

            （ 总 {{ orderItem.allAmount }}  {{ store.state.BTC}} )
          </div>
          </div>
        </div>
        <div class="data_box " v-if="orderItem.orderType=='2'">
        <div class="lend_title">{{ orderItem.status==0?t('needPay'):t('needPay') }}</div>
          <div class="order_line_item">
        <div class="interest_amount"><img class="token_img"  :src="requireImg(store.state.btcImg)" alt="" />{{ btcAmount }} <span>{{ store.state.BTC}}</span></div>
      </div>
      </div>
      <div class="data_box" v-else>
        <div class="lend_title">{{ orderItem.status==0?t('needPay'):t('needPay') }}:</div>
        <div class="interest_amount">
          <img class="token_img"  :src="requireImg(store.state.usdtImg)" alt="" />
          <span>{{ usdtAmount }}</span> <span>{{ store.state.USDT}}</span>
        </div>
      </div>
    </div>
    </div>
 
    <div class="order_box" style="margin-top: 14px">
      <div class="order_title">{{ orderItem.status==0? '挂单信息':'订单信息' }}  <span class="order_id"> #{{ orderItem.id  }}</span> </div>
      <div class="order_content">
        <div class="shop_box" style="margin-top: 0;" v-if="orderItem.tarder&&orderItem.tarder!=store.state.address0"  >
      <div class="shop_name" > 
        <van-image @click.stop="openShopOrder(orderItem)" class="shop_img" v-if="orderItem.url" round fit="cover" :src="orderItem.url" />
              <div v-else @click.stop="openShopOrder(orderItem)" class="shop_img">
                {{orderItem.name&&orderItem.name.slice(0,1) }}
              </div>
        <span @click.stop="openShopOrder(orderItem)">{{ orderItem.name }}</span> </div>
      <div class="shop_describe">
        <span>{{orderItem.describe  }} </span>
      </div>
    </div>
    <div v-if="orderItem.status==1||orderItem.status==3||orderItem.status==2">
    <div class="order_line">
          <div class="lend_title">
            {{ t("allAmount") }}
          </div>
          <div class="interest_amount">
            <div  class="interest_amount" v-if="orderItem.orderType=='2'">
            <img class="token_img" :src="requireImg(store.state.usdtImg)" alt="" />
            <span class="amount_value2"> {{ orderItem.allAmount }}</span> {{ store.state.USDT}}
           </div>
          <div class="interest_amount" v-else>
            <img class="token_img"  :src="requireImg(store.state.btcImg)" alt="" />
           <span class="amount_value2">{{ orderItem.allAmount }} </span>  
            {{ store.state.BTC}}
          </div>
          </div>
        </div>

        <div class="order_line"> 
          <div class="lend_title">
            {{ t("saveAmount") }}
          </div>
          <div class="interest_amount">
            <div  class="interest_amount" v-if="orderItem.orderType=='2'">
            <img class="token_img" :src="requireImg(store.state.usdtImg)" alt="" />
            <span class="amount_value2"> {{ orderItem.amount }}</span> {{ store.state.USDT}}
           </div>
          <div class="interest_amount" v-else>
            <img class="token_img"  :src="requireImg(store.state.btcImg)" alt="" />
           <span class="amount_value2">{{ orderItem.amount }} </span>  
            {{ store.state.BTC}}
          </div>
          </div>
          
        </div>

        <div class="order_line">
    <div  class="lend_title">
        {{t("价格方式") }}
      </div>
      <div>{{ orderItem.priceType==1?t('固定价格') :t('实时价格') }}</div>
     </div>
     <!-- 价格 -->
        <div class="order_line">
          <div class="lend_title">
            {{ t("price") }}
          </div>
          <div class="interest_amount">
            <div  class="interest_amount" >
            <span class="amount_value"> {{ truePrice }}</span> {{ store.state.USDT}}
           </div>
          </div>
        </div>

        </div>
        <div class="order_line">
          <div class="lend_title">
            {{ t("lastPrice") }}
          </div>
          <div class="interest_amount">
            <div  class="interest_amount" >
            <span class="amount_value2" :class="[store.state.latestRecord.orderType==1?'red':'green']"> {{ store.state.latestRecord.lastestPrice || 0 }}  {{ store.state.USDT}}</span> 
           </div>
          </div>
        </div>

    <div class="order_line">
      <div class="lend_title">
        {{  t("createTime") || "创建时间"  }}
      </div>
      <div>{{ orderItem.createTime + " By " + splitAddress(orderItem.owner,9)  }}</div>
    </div>

    <div class="order_line" v-if="orderItem.status==1 || orderItem.status==2 || orderItem.status==3">
      <div class="lend_title"  v-if="orderItem.status==3">
        {{ t("下架时间") }}
      </div>
      <div>{{ orderItem.updateTime }}</div>
    </div>



      <div class="order_line">
      <div class="lend_title">
        {{  t("ConfirmationTip") }}
      </div>
      <div class="interest_amount" v-if="orderItem.orderType==2">
        <img class="token_img" :src="requireImg(store.state.usdtImg)" alt="" />
        {{ parseFloat((orderItem.tip*orderItem.allAmount).toFixed(6))}} {{ store.state.USDT}} ({{ orderItem.tip*100 }}%) 

      </div>
      <div class="interest_amount" v-else>
        <img   class="token_img" :src="requireImg(store.state.btcImg)" alt="" />
        {{ parseFloat((orderItem.tip*orderItem.allAmount).toFixed(6))}} <span>{{ store.state.BTC}}</span> ({{ orderItem.tip*100 }}%) 

      </div>
      </div>
      <!-- 备注 -->
      <div v-if="orderItem.remark" class="order_line">
      <div class="lend_title">
        {{  t("remark") }}
      </div>
      <div class="order_remark">
        {{ orderItem.remark }}
      </div>
    </div>
  </div>
  </div>

  <!-- <div class="order_box" style="margin-top: 14px;">
      <div class="order_title">其他信息</div>
      <div class="order_content">

        <div  class="order_line">
      <div class="lend_title">
        {{  t("实时价格") }}
      </div>
      <div class="order_remark order_line_item">
        <div class="price_box">1 {{ store.state.BTC }} ≈ {{ store.state.tokenPrice }} {{ store.state.USDT }}</div>
        <div class="order_item_describe tip" v-if="oldPrice">
      {{ calculatePriceChange(store.state.tokenPrice,oldPrice ) }}
    </div>
      </div>
    </div>
   

    <div  class="order_line" v-if="oldPrice">
      <div class="lend_title">
        {{  t("下单价格") }}
      </div>
      <div class="order_remark">
        <div class="price_box">1 {{ store.state.BTC }} ≈ {{ oldPrice }} {{ store.state.USDT }}</div>
      </div>
    </div>

      </div>
  </div> -->

      
    </div>
      <div class="fixedD" v-if="(orderItem.status==0&&orderItem.owner!=store.state.address)">
        <div class="needPay" v-if="orderItem.orderType==2"> <span>{{t('预计兑换')}} ： </span><span class="payU">{{ needPayB }} {{ store.state.BTC}}</span>  </div>
        <div class="needPay" v-if="orderItem.orderType==1"> <span> {{ t('预计兑换') }} ： </span><span class="payU">{{ needPay }} {{ store.state.USDT}}</span>  </div>
        <div> {{ t('myValue') }} ：
       <span v-if="orderItem.orderType==2">{{ store.state.btcBalance }} {{ store.state.BTC}}</span>  
       <span v-else> {{ store.state.usdtBalance }} {{ store.state.USDT}}</span>  
      </div>
      </div>

    <div class="fixedbutton background_box">
      <div class="button_box" v-if="orderItem.status==0">
        <div class="button_box" v-if="orderItem.owner==store.state.address">
          <van-button :loading="cancelLoading" @click="cancelLoan" type="primary">
            {{ t('recallOrder') }}
          </van-button>
          <van-button  @click="changeOrder" type="primary">
            {{ t('修改') }}
          </van-button>
          <van-button   :loading="loading" @click="outOnLoan('3')" type="primary">
            {{ t('outOrder') }}
          </van-button>
        </div>
        <!-- 获取订单 -->
        <van-button v-else  :loading="loading" @click="confirm" type="primary">
          {{ t('soonGet') }}
        </van-button>
      </div>
      <!-- 下架的订单取消或者上架 -->
      <div class="button_box" v-if="orderItem.status==3">
        <div class="button_box" v-if="orderItem.owner==store.state.address">
          <van-button :loading="cancelLoading" @click="cancelLoan" type="primary">
            {{ t('recallOrder') }}
          </van-button>
          <van-button  :loading="loading" @click="outOnLoan('0')" type="primary">
            {{ t('onOrder') }}
          </van-button>
        </div>
      </div>
    </div>
    <shareC2C v-model="showShare" :orderItem="orderItem"></shareC2C>
    <edit-order  :orderItem="orderItem" v-model="showEdit"></edit-order>
  </div>
</template>
<script setup>
import AESUtils from "@/utils/AES.js";
import { splitAddress } from "@/utils/index.js";
import { showToast } from "vant";
import "vant/es/toast/style";
import { ethers } from "ethers";
import Blockies from "@/components/blockVue.vue";
import { useStore } from "vuex";
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
import { usdtContract, c2cContract,btcContract } from "@/utils/config.js";
const store = useStore();
import { getDate } from "@/utils/index.js";
import { useRouter } from "vue-router";
import { upload, jsonUpload, IPFS_PUBLIC_URL, getJson } from "@/api/User.js";
import c2cEth from "@/utils/c2cEth.js";
import eth from "@/utils/eth.js";
const requireImg = (imgPath) => {
  return new URL(`../../assets/images/${imgPath}`, import.meta.url).href;
};
const dayRate  = computed(() => {
  return '(' + t('dayRate') + ' ' + parseFloat((orderItem.value.interestRate/ orderItem.value.duration*100).toFixed(4))  + ' % )';
});
const yearData = computed(() => {
  return '(' +  t('yearRate') + ' ' + parseFloat((365/  (orderItem.value.duration)  * orderItem.value.interestRate*100).toFixed(2)) + ' % )'  ;
});
const overDay = ref('')
const router = useRouter();
const loading = ref(false);
const cancelLoading = ref(false)
const addLoading = ref(false)
const usdtValue = ref('')
const vdsValue = ref('')
const pingLoading = ref(false)
const orderItem = ref({})
const showShare = ref(false)
const showEdit= ref(false)
const changeOrder = ()=>{
  showEdit.value = true
}
const toShare = ()=>{
  showShare.value = true
}
const setMaxUsdt = ()=>{
  usdtValue.value = orderItem.value.amount
}
const overAmount = computed(()=>{
  return (Number(orderItem.value.amount) < Number(usdtValue.value) )|| (Number(orderItem.value.amount) < Number(vdsValue.value) )
}) 
const setMaxVds = ()=>{
  vdsValue.value = orderItem.value.amount
}
const openShopOrder = (item) => {
  goToPage("shopOrder", item);
};
const orderTitle = computed(()=>{
  if(orderItem.value.status==0||orderItem.value.status==1){
    return  orderItem.value.orderType==2? t('buyO0') :t('sellO0')
  }else{
    return  orderItem.value.orderType==2? t('buyO') :t('sellO')
  }
})
const truePrice = computed(()=>{
  return  orderItem.value.priceType==1?orderItem.value.price:  parseFloat((store.state.tokenPrice*(1+orderItem.value.upRate*(orderItem.value.rateType==1?1:-1))).toFixed(6)) 
})
const getPassDate = ()=>{
  // 将给定时间转换为 Date 对象
const givenDate = new Date(orderItem.value.getTime );
// 计算加上天数后的日期
const dueDate = new Date(givenDate);
dueDate.setDate(givenDate.getDate() + Number(orderItem.value.duration));
// 获取当前时间
const now = new Date();
// 计算当前时间与到期时间的差异（毫秒）
const timeDiff = dueDate - now;

// 将毫秒转换为天、小时、分钟和秒
const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
const hoursDiff = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
const minutesDiff = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
const secondsDiff = Math.floor((timeDiff % (1000 * 60)) / 1000);

// 判断是否逾期
if (timeDiff > 0) {

} else {
    const overdueDays = Math.abs(daysDiff);
    const overdueHours = Math.abs(hoursDiff);
    const overdueMinutes = Math.abs(minutesDiff);
    const overdueSeconds = Math.abs(secondsDiff);
    overDay.value = `已逾期：- ${overdueDays} 天 ${overdueHours} 小时 ${overdueMinutes} 分钟`
}
return timeDiff
}
const main = async () => {
  orderItem.value = await c2cEth.getOrderDetail(router.currentRoute.value.query.id)
  // // 再获取线上
  orderItem.value = await c2cEth.orderList(router.currentRoute.value.query.id)

  c2cEth.getLatest()
  // 还款剩余时间
  // 超出时间

};
const needAdd = computed(()=>{
    return store.state.tokenPrice < oldPrice.value
})
const futureTime = computed(()=>{
  //创建date变量
var nowDate = new Date();
//添加天数
if(orderItem.value.status==0){

}else{
  nowDate = new Date(orderItem.value.getTime)
}
  return  getDate(nowDate.setDate(nowDate.getDate() + Number(orderItem.value.duration)));
  
})
const getTruePrice = (res)=>{
  let price = res.priceType==1?res.price:  parseFloat((store.state.tokenPrice*(1+res.upRate*(res.rateType==1?1:-1))).toFixed(6)) 
  return price
}
const btcAmount = computed(()=>{
  if(orderItem.value.orderType==2&&orderItem.value.status==0){
    let truePrice =  getTruePrice(orderItem.value)
    return parseFloat((usdtValue.value / truePrice).toFixed(8))
  }else{
    return orderItem.value.amount
  }
})

const usdtAmount = computed(()=>{
  if(orderItem.value.orderType==1&&orderItem.value.status==0){
    let truePrice =  getTruePrice(orderItem.value)
    return parseFloat((vdsValue.value * truePrice).toFixed(8))
  }else{
    return orderItem.value.amount
  }
})
const tipValue = computed(()=>{
  // 自己下的单还需要支付小费
  if(orderItem.value.orderType==1){
    return parseFloat((orderItem.value.tip*usdtAmount.value).toFixed(4))
  }else{
    return 0
  }

})
const fixedFee = computed(()=>{
  // 自己下的单还需要支付小费
    return parseFloat((orderItem.value.interestRate*usdtAmount.value).toFixed(4))
})
const needPayU = computed(()=>{
  // 自己下的单还需要支付小费
  if(orderItem.value.way==0){
    // 小费addBtc
    return parseFloat((usdtAmount.value + fixedFee.value + tipValue.value + overFee.value).toFixed(4))
  }else{
    return  parseFloat((usdtAmount.value + tipValue.value + allFee.value).toFixed(4)) 
  }
})
const needPayB = computed(()=>{
  // 自己下的单还需要支付手续费不要
  // parseFloat((orderItem.value.amount / store.state.tokenPrice/store.state.lendRate).toFixed(8))
    return  parseFloat((Number(btcAmount.value)).toFixed(8))

})
const isDown = computed(()=>{
  // 自己下的单还需要支付手续费
    let oldPrice = orderItem.value.amount / orderItem.value.amountBTC;
    return (store.state.tokenPrice < oldPrice)&&orderItem.value.isCloseOut
    // orderItem.value.isCloseOut

})
const oldPrice = computed(()=>{
  let price = 0
  if(orderItem.value.amountBTC){
    price = parseFloat((orderItem.value.amount / orderItem.value.amountBTC/0.8).toFixed(4));
  }else{
    return 0
  }
  return price
})
const needAddVsd = computed(()=>{
  return  parseFloat(((orderItem.value.amount / store.state.tokenPrice/store.state.lendRate) - orderItem.value.amountBTC).toFixed(4)) 
})
const needPay = computed(()=>{
  // 自己下的单还需要支付小费
    return  usdtAmount.value

})
main();
const goToPage = (value,item) => {
  let query = {}
  if(item) {
    query = {
      tarder: item.tarder,
      owner:item.owner,
    }
  }
  router.push({
    name: value,
    query
  });
};
const calculatePriceChange = (currentPrice, previousPrice) =>{
    // 计算价格变化
    const priceChange = currentPrice - previousPrice;

    // 计算变化幅度（百分比）
    const changePercentage = (priceChange / previousPrice) * 100;

    // 判断是上涨还是下跌
    if (priceChange > 0) {
        return `上涨 ${changePercentage.toFixed(2)}%`;
    } else if (priceChange < 0) {
        return `下跌 ${Math.abs(changePercentage).toFixed(2)}%`;
    } else {
        return "价格不变";
    }
}
// 提前三天还款
const overday = computed(()=>{
  orderItem.value.getTime
  var nowDate = new Date(orderItem.value.getTime)
  let today = new Date().getTime()
  let data =  nowDate.setDate(nowDate.getDate() + Number(orderItem.value.duration) - 3)
  return  today > data
//添加天数
})
const morethan = computed(()=>{
  orderItem.value.getTime
  var nowDate = new Date(orderItem.value.getTime)
  let today = new Date().getTime()
  let data =  nowDate.setDate(nowDate.getDate() + 1)
  return  today > data
//添加天数
})

// 超出一天可取消订单
const overday2 = computed(()=>{
  orderItem.value.getTime
  var nowDate = new Date(orderItem.value.getTime)
  let today = new Date().getTime()
  let data =  nowDate.setDate(nowDate.getDate() + Number(orderItem.value.duration) + 1)
  return  today > data
//添加天数
})
// 超出一天可取消订单
const overdayValue = computed(()=>{
  var nowDate = new Date(orderItem.value.getTime)
  let today = new Date().getTime()
  const diffTime = Math.abs(nowDate - today);
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); 
  if(diffDays>Number(orderItem.value.duration)){
    // 超时了
      let day =   (diffDays - Number(orderItem.value.duration))
      return day

  }else{
    return 0
  }
//添加天数
})
const overFee = computed(()=>{
  if(overdayValue.value){
    return    parseFloat((orderItem.value.amount * (orderItem.value.interestRate / orderItem.value.duration) * overdayValue.value).toFixed(4))
  }else{
    return 0
  }
  //添加天数)
//添加天数
})
const allFee = computed(()=>{
  if(orderItem.value.way==1 && orderItem.value.getTime){
    var nowDate = new Date(orderItem.value.getTime)
    let today = new Date().getTime()
    const diffTime = Math.abs(nowDate - today);
    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); 
    return   parseFloat(( orderItem.value.amount * (orderItem.value.interestRate / orderItem.value.duration) * diffDays).toFixed(4))
  }else{
    return fixedFee.value
  }
  //添加天数)
//添加天数
})

// 获取订单
const confirm = async () => {
  // 是借出 则质押btc 
  let tokenContract = usdtContract[0]
  let tokenDecimals = usdtContract[3]
  let amount = 0
  let needPrice = ((usdtAmount.value)*1.1).toFixed(8)
  if(orderItem.value.orderType==2){
     tokenContract = btcContract[0]
     tokenDecimals = btcContract[3]
     if(usdtValue.value<=0){
      showToast("请输入数量")
      return
     }
     amount = ethers.utils.parseUnits(usdtValue.value,usdtContract[3])
     needPrice = ((btcAmount.value)*1.1).toFixed(8)
  }else{
    if(vdsValue.value<=0){
      showToast("请输入数量")
      return
     }
     amount = ethers.utils.parseUnits(vdsValue.value,btcContract[3])
  }
  let tokenValue = await eth.getBalanceOf(tokenContract, tokenDecimals);
  if (tokenValue < Number(needPrice)) {
    showToast(t("noMoney"));
    return;
  }
  loading.value = true;
  try {
    let allowance = await eth.getAllowance(
      tokenContract,
      c2cContract,
      tokenDecimals
    );
    if (Number(needPrice) > Number(allowance)) {
      await eth.approve(
        needPrice,
        tokenContract,
        c2cContract,
        tokenDecimals
      );
      // 授权
    }
    let hex = await c2cEth.ContractWithSinger.getLoan(orderItem.value.id,amount ,'');
    await hex.wait();
    loading.value = false;
    showToast(t("getSuccess"));
    // 更新状态
    goToPage("myRecord");
  } catch (err) {
    showToast(t("getFail"));
    loading.value = false;
  }
};
// 取消订单
const cancelLoan = async () => {
  try{
    cancelLoading.value = true
  // 是借出 则质押btc 
    let hex = await c2cEth.ContractWithSinger.cancelLoan(orderItem.value.id);
    await hex.wait();
    cancelLoading.value = false;
    showToast(t("cancelSuccess"));
    // 更新状态
    goToPage("myOrder");
  } catch (err) {
    showToast(t("cancelFail"));
    cancelLoading.value = false;
  }
}
// 清算订单
const clearLoan = async () => {
  try{
    cancelLoading.value = true
  // 是借出 则质押btc 
    let hex = await c2cEth.ContractWithSinger.clearLoan(orderItem.value.id);
    await hex.wait();
    cancelLoading.value = false;
    showToast(t("doSuccess"));
    // 更新状态
    goToPage("myOrder");
  } catch (err) {
    showToast(t("doFail"));
    cancelLoading.value = false;
  }
}

const pingLoan = async () => {
  try{
    loading.value = true
  // 是借出 则质押btc 
    let hex = await c2cEth.ContractWithSinger.pingLoan(orderItem.value.id);
    await hex.wait();
    loading.value = false;
    showToast(t("doSuccess"));
    // 更新状态
    goToPage("myOrder");
  } catch (err) {
    showToast(t("doFail"));
    loading.value = false;
  }
}

// 下架订单
const outOnLoan = async (status) => {
  try{
    loading.value = true
  // 是借出 则质押btc 
    let hex = await c2cEth.ContractWithSinger.outOnLoan(orderItem.value.id,Number(status));
    await hex.wait();
    loading.value = false;
    showToast(t("doSuccess"));
    // 更新状态
    goToPage("myC2C");
  } catch (err) {
    showToast(t("doFail"));
    loading.value = false;
  }
}


</script>

<style lang="scss" scoped>
.data_box{
  display: flex;
  gap:10px;
  align-items: center;
  line-height: 20px;

}
.payU{
  display: flex;
}
.amount_value2{
  color: #ddd;
}
  .colon {
    display: inline-block;
    margin: 0 4px;
  }
  .block {
    display: inline-block;
    // color: #fff;
    color: #f77a2f;

    text-align: center;
  }
.lender_box{
    border:1px solid #888;
    border-radius: 6px;
    padding:6px 10px;
    flex:1;
}
.order_head_title{
gap:16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .lend_title{
    line-height: 20px;
    font-weight: bold;
    text-align: center;
  }
}
.my_value_box{
  display: flex;
  flex-wrap: wrap;
  line-height: 20px;
  justify-content: center;
}
.needPay{
  line-height: 20px;
  padding: 0;
}
.amount_value{
  font-size: 20px;
  font-weight: bold;
  color: $money;
}
.order_id{
  font-size: 14px;
  margin-left: 8px;
  font-weight: bold;
  color: $money;
}
.fixedD{
  background: #010e37;
}
.amount_name{
  color: #999;
}
.order_box{
  border: 1px solid #888;
  border-radius: 5px;
  .order_title{
    font-size: 11px;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #888;
    background: #010e37;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    padding: 0 6px;
  }
  .order_content{
    padding: 6px 6px 6px 6px;
    .price_box{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

  }
  .order_line{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    line-height: 20px;
    .order_line_item{
      min-width: 200px;
      display: flex;
      justify-content: flex-end;
      position: relative;
      align-items: baseline;
      margin-bottom: 6px;
      .order_item_describe{
        position: absolute;
        top: 15px;
        right: 0;
      }
    }
  }
}
.overday{
  color: #f00;
  font-size: 12px;
}
.big_num{
  font-size: 16px;
  font-weight: bold;
}
.tip{
  color: #f77a2f;
}
.red_tip{
  color: #f00;
}
.button_box{
  width: 100%;
  display: flex;
  padding: 0 10px;
  justify-content: center;
  gap: 10px;
  align-items: center;
}
  .shop_box {
    .shop_name {
      display: flex;
      align-items: center;
      font-weight: bold;
      gap: 5px;
      .shop_img{
        width: 20px;
    height: 20px;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #181E25;
    border-radius: 6px;
        background: rgb(234, 236, 239);
        
      }
    }
    .shop_describe {
      font-size: 9px;
      margin:3px 0;
      color: #999;
    }
  }
// .order_id {
//   color: #f77a2f;
//   // border-bottom: 1px solid #6f6f70;
//   padding: 6px 0 16px 0;
//   margin-bottom: 10px;
// }
.confirm_notice {
  font-size: 10px;
  color: #333;
}
.interest_amount {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.order_remark{
  color: #ccc;
}
// .van-dropdown-menu{
//    border: 1px solid #414c60;
//   border-radius: 8px;

// }
:deep .van-dropdown-menu__title {
  font-size: 12px;
}
:deep .van-dropdown-menu__bar {
  border: 1px solid #414c60;
  border-radius: 6px;
  height: 36px;
  width: 90px;
  font-size: 10px;
}
.textArea_field {
  .van-field {
    height: auto !important;
    line-height: 1.3 !important;
    font-size: 10px;
  }
}
.lend_title {
  font-weight: bold;
}
.van-cell {
  font-size: 12px;
  background: transparent !important;
}
.content_wrapper {
  height: calc(100vh - 10px);
  // height: 100vh;
  box-sizing: border-box;
  overflow: auto;
  background: #eff0f4;
}
.isHeight {
  height: 100vh;
}
.wrap {
  padding: 10px 12px 20px 12px;
  min-height: calc(100vh - 200px);
  overflow: auto;
  margin-top: 40px;
  position: relative;
  .lend_des {
    display: flex;
    padding-bottom: 10px;
    padding-top: 6px;
    font-size: 12px;
  }
  .van-button {
    margin-top: 0.58667rem;
    width: 100%;
    height: 1.06667rem;
    font-size: 0.48rem;
    font-weight: 500;
    border-radius: 0.53333rem;
  }

  .van-button--primary {
    border: none;
    font-size: 0.48rem;
    font-weight: 400;
  }

  :deep .van-cell__right-icon {
    font-size: 12px;
  }
  .picture_tips {
    color: #999;
  }

  .form_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;

    .form_title {
      display: flex;
      align-items: center;
      opacity: 0.8;
      font-size: 11px;
    }

    .line_h30 {
      line-height: 30px;
    }

    .form_content {
      flex: 1;
      display: flex;
      align-items: center;
      .van-field {
        border: 1px solid #414c60;
      }
      .color_light {
        color: #ddd;
        display: inline-block;
        border: 1px solid #414c60;
        padding: var(--van-cell-vertical-padding) 6px;
        margin-left: 10px;
        border-radius: 5px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        img {
          height: 16px;
        }
      }
      .radio_group {
        padding: 0.31rem 0.5rem;
      }
      .van-cell {
        font-size: 11px;
      }
      // display: flex;
      // justify-content: flex-end;
    }
  }
}
</style>
